<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div ng-if="!loaded" class="mar-top-md">Loading...</div>
      <div ng-if="replicaSet">
        <h1 class="contains-actions">
          <!-- Actions -->
          <ng-include ng-if="kind === 'ReplicaSet'"
            src=" 'views/browse/_replica-set-actions.html' ">
          </ng-include>
          <ng-include ng-if="kind === 'ReplicationController'"
            src=" 'views/browse/_replication-controller-actions.html' ">
          </ng-include>
          {{replicaSet.metadata.name}}
          <span
            ng-if="deploymentConfigMissing"
            class="pficon pficon-warning-triangle-o"
            style="cursor: help; vertical-align: middle;"
            data-toggle="tooltip"
            data-trigger="hover"
            title="The deployment's deployment config is missing."
            aria-hidden="true">
          </span>
          <span ng-if="deploymentConfigMissing" class="sr-only">Warning: The deployment's deployment config is missing.</span>
          <small class="meta">created <span am-time-ago="replicaSet.metadata.creationTimestamp"></span></small>
        </h1>
        <labels ng-if="deploymentConfigName" labels="replicaSet.metadata.labels" clickable="true" kind="deployments" title-kind="deployments for deployment config {{deploymentConfigName}}" project-name="{{replicaSet.metadata.namespace}}" limit="3" navigate-url="{{replicaSet | configURLForResource}}"></labels>
        <labels ng-if="!deploymentConfigName" labels="replicaSet.metadata.labels" clickable="true" kind="deployments" project-name="{{replicaSet.metadata.namespace}}" limit="3"></labels>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content" persist-tab-state>
    <div class="container-fluid">
      <div class="row" ng-if="replicaSet">
        <div class="col-md-12">
          <uib-tabset>
            <uib-tab active="selectedTab.details">
              <uib-tab-heading>Details</uib-tab-heading>
              <div class="resource-details">
                <ng-include src=" 'views/browse/_replica-set-details.html' "></ng-include>
              </div>
            </uib-tab>
            <uib-tab heading="Environment" active="selectedTab.environment">
              <uib-tab-heading>Environment</uib-tab-heading>
              <p ng-if="deployment && (deploymentsVersion | canI : 'update')">
                <span class="pficon pficon-info" aria-hidden="true"></span>
                Environment variables can be edited on the deployment
                <a ng-href="{{deployment | navigateResourceURL}}?tab=environment">{{deployment.metadata.name}}</a>.
              </p>
              <p ng-if="deploymentConfigName && (deploymentConfigsVersion | canI : 'update')">
                <span class="pficon pficon-info" aria-hidden="true"></span>
                Environment variables can be edited on deployment config
                <a ng-href="{{replicaSet | configURLForResource}}?tab=environment">{{deploymentConfigName}}</a>.
              </p>
              <!--
                Use the `hasDeployment` filter rather than checking for the `deployment` scope
                var. This prevents the editor from displaying briefly before the deployment has
                loaded, which adds an empty env var name/value to the array. The empty
                value breaks `container.env.length` check for the no env vars message.
              -->
              <edit-environment-variables
                api-object="replicaSet"
                ng-readonly="(replicaSet | hasDeployment) || (replicaSet | hasDeploymentConfig)">
              </edit-environment-variables>
            </uib-tab>
            <uib-tab ng-if="metricsAvailable" heading="Metrics" active="selectedTab.metrics">
              <!-- Use ng-if to remove the metrics directive when the tab is not active so
                   we don't update in the background. -->
              <deployment-metrics
                  ng-if="selectedTab.metrics && podsForDeployment"
                  pods="podsForDeployment" containers="replicaSet.spec.template.spec.containers"
                  alerts="alerts">
              </deployment-metrics>
            </uib-tab>
            <uib-tab ng-if="deploymentConfigName && logOptions.version && (deploymentConfigsLogVersion | canI : 'get')" active="selectedTab.logs">
              <uib-tab-heading>Logs</uib-tab-heading>
              <log-viewer
                ng-if="selectedTab.logs"
                follow-affix-top="390"
                object="replicaSet"
                context="projectContext"
                options="logOptions"
                empty="logEmpty"
                run="logCanRun">

                <span ng-if="replicaSet | deploymentStatus">
                  <label>Status:</label>
                  <status-icon status="replicaSet | deploymentStatus"></status-icon>
                  {{replicaSet | deploymentStatus}}
                </span>
              </log-viewer>
            </uib-tab>
            <uib-tab active="selectedTab.events" ng-if="eventsVersion | canI : 'watch'">
              <uib-tab-heading>Events</uib-tab-heading>
              <events api-objects="[ replicaSet ]" project-context="projectContext" ng-if="selectedTab.events"></events>
            </uib-tab>
          </uib-tabset>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>
